{% extends "base.html" %}

{% block extrajs %}
{{ super() }}
{% autoescape false %}
<script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({

            chart: {
                renderTo: 'container',
                type: 'area'
            },

            title: {
                text: '{{ title }}'
            },

            subtitle: {
                text: 'Previous {{ months }} months'
            },

            xAxis: {
                tickmarkPlacement: 'on',
                title: {
                    enabled: true
                },
                type: "datetime"
            },

            yAxis: {
                title: {
                    text: 'Cards'
                },

                labels: {
                    formatter: function() {
                        return this.value;
                    }
                }
            },

            tooltip: {
                formatter: function() {
                    var d = new Date(this.x);
                    var ds =  d.getUTCMonth()+1 + '/' + d.getUTCDate();
                    return ''+
                        ds + ' ' + this.series.name +': '+ Highcharts.numberFormat(this.y, 0, ',') +' cards';
                }
            },

            plotOptions: {
                area: {
                    stacking: 'normal',
                    lineColor: '#666666',
                    lineWidth: 1,

                    marker: {
                        enabled: false,
                        lineWidth: 1,
                        lineColor: '#666666'
                    },

                    pointStart: Date.UTC({{ start_date.year }}, {{ start_date.month }}-1, {{ start_date.day }}),
                    pointInterval: 24 * 3600 * 1000 // one day
                }
            },

            series: [
                {% for seri in chart['series'] %}
                {
                    name: {{ seri['name']|jsonencode }},
                    data: {{ seri['data']|jsonencode }},
                }{% if not loop.last %},{% endif %}
                {% endfor %}
            ]
        });
    });
});</script>
{% endautoescape %}
{% endblock %}

{% block content %}

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<div id="wip_data">
<table>
    <tr>
        <th>Day</th>
        <th>Planning</th>
        <th>Doing</th>
        <th>Done</th>
    </tr>

    {% for row in flowdata %}
    <tr class="{{ loop.cycle('odd', 'even') }}">
        <td>{{ row.date.strftime("%m/%d/%Y") }}</td>
        <td>{{ row.backlog }}</td>
        <td>{{ row.in_progress }}</td>
        <td>{{ row.done }}</td>
    </tr>
    {% endfor %}
</table>


{% endblock content %}